<template>
  <div class="ai_pose">
    <HeaderBar title="AI Pose" @back="router.back()" />
    <div class="title">Choose a pose</div>
    <!-- 轮播 -->
    <div class="swiper_wrap">
      <van-swipe ref="swipeRef" :width="108" :loop="true" @change="onChange" :show-indicators="false"
        class="swipe-container">
        <van-swipe-item v-for="(item, index) in list" :key="index" @click="handleItemClick(index)"
          :class="{ activeItemStyle: currentIndex === index }">
          <div class="image-wrapper" :style="{ marginRight: index < list.length - 1 ? '8px' : '0' }">
            <img :src="item.imgSrc" class="swipe-image" />
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 勾选 -->
    <div class="select_checkbox_wrap" v-if="takeOffStatus">
      <van-checkbox v-model="checked">Take off clothes</van-checkbox>
    </div>
    <!-- 确认按钮 -->
    <ComfirmBtn btnName="Generate" :gemsNum="gemsNum" :diamondNum="diamondNum" :isShowDiamond="isShowDiamond"
      @comfrim="generateComfirm" />
    <!-- 结果展示（ai pose调过来的时候展示；remove调过来不展示） -->
    <!-- <div class="wrap_result">
      <ResultList />
    </div> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import HeaderBar from "@/components/HeaderBar.vue";
import ResultList from "@/components/ResultList.vue";
import ComfirmBtn from "@/components/ComfirmBtn.vue";
import api from "@/api";

import { getImageByType } from "@/utils/imageMap";
const getImageSrc = (type) => {
  try {
    return getImageByType(type) || new URL("@/assets/images/ai_pose/default.png", import.meta.url).href;
  } catch {
    return new URL("@/assets/images/ai_pose/default.png", import.meta.url).href;
  }
};

const gemsNum = ref("");
const diamondNum = ref("100");
const isShowDiamond = ref(true);

// 创作类型数组
const list = ref([])
//const getCurrentImg = ref({})

const router = useRouter();

// 当前激活的图片索引
const currentIndex = ref(0);

const takeOffStatus = ref(0)
const checked = ref(true)

// 轮播切换回调
const onChange = (index) => {
  currentIndex.value = index;
  takeOffStatus.value = list.value[currentIndex.value].isTakeOff
  //getCurrentImg.value = list.value[index]
};
const handleItemClick = (index) => {
  currentIndex.value = index;
  takeOffStatus.value = list.value[currentIndex.value].isTakeOff
};


const generateComfirm = async () => {
  if (Number(gemsNum.value) < 100) {
    router.push("./myDiamonds");
    return;
  }
  // 从本地拿到 ossUrl
  const getOssUrl = sessionStorage.getItem("poseossUrl");
  const params = {
    originFileUrl: getOssUrl,
    typeCode: list.value[currentIndex.value]?.typeCode,
    isTakeOff: (takeOffStatus.value && checked.value) ? 1 : 0
  };

  try {
    const res = await api.taskSubmit(params);
    router.push({
      path: "/poseCreating",
      query: {
        taskNo: res.data.taskNo,
        from: "pose"
      },
    });
  } catch (err) {
    console.log(err);
    // 错误的时候，提示msg
    //errorMsg.value = err.message;
    //errorShow.value = true;
  }
};
// 用户信息
const getUseInfo = async () => {
  try {
    const response = await api.userInfo();
    gemsNum.value = String(response.data.balance);
  } catch (err) {
    console.log(err);
  }
};
// 查询创作类型列表
const queryTypeList = async () => {
  try {
    const res = await api.typeList();
    const filterData = res.data.filter((item) => {
      return item.typeCode >= 21
    })
    list.value = filterData.map((item) => ({
      ...item,
      imgSrc: getImageSrc(item.typeCode),
    }));
    takeOffStatus.value = list.value[currentIndex.value].isTakeOff
  } catch (err) {
    console.log(err);
  }
};
onMounted(() => {
  // 获取用户信息
  getUseInfo();
  queryTypeList();
});
</script>

<style scoped lang="less">
.ai_pose {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 10px 16px 30px;
  /* 背景图设置 */
  background-image: url("../assets/images/bg_texture@2x.png");
  background-position: top center;
  /* 从顶部开始 */
  background-repeat: no-repeat;
  /* 不重复 */
  background-size: 100% auto;
  /* 宽度满屏，高度自适应 */
  background-color: #fbfbfd;

  .title {
    font-size: 18px;
    color: #000000;
    text-align: center;
    line-height: 22px;
  }

  .swiper_wrap {
    margin-top: 16px;
    margin-bottom: 25px;

    .van-swipe-item {
      box-sizing: border-box;
      padding: 0 4px;

      .image-wrapper {
        width: 100%;
        box-sizing: border-box;

        .swipe-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .activeItemStyle {
      .image-wrapper {
        border: 4px solid #6b77ff;
      }
    }
  }

  .wrap_result {
    margin-top: 60px;
  }

  .select_checkbox_wrap {
    img {
      width: 24px;
    }
  }
}
</style>
